<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:body class="home">
	<p:layout fullPage="true">
		<ui:composition template="/pages/protected/templates/page.xhtml">
			<ui:define name="divBody">
				<h:form id="form">
					<div align="center" style="margin: 30px;">
						<p:carousel id="basicCarousel" value="#{userMB.sistemas}" var="sistema" 
							itemStyle="height:340px;width:400px;margin:5px;" effect="easeInStrong">  
						    <f:facet name="header">  
						            Sistemas
						    </f:facet>  
						    <h:panelGrid columns="1" cellpadding="3">  
						        <h:outputText value="#{sistema.nome}" styleClass="titulo"/>  
						        
						        <h:graphicImage library="images" name="#{sistema.imagem}"
								title="#{sistema.nome}" alt="#{sistema.nome}"/>
						       
						        <h:outputText styleClass="descricao" value="#{sistema.descricao}"/>  
						        
						        <h:outputLink styleClass="link1" value="#{sistema.link}" title="#{sistema.nome}">
									<h:outputText styleClass="link" value="Acessar #{sistema.nome}"/>
								</h:outputLink>
													          
						    </h:panelGrid>  
						    <f:facet name="footer">  
						    </f:facet>  
						</p:carousel>
					</div>
					<!-- <p:carousel id="basicCarousel" value="#{sistemaMB.sistemas}" var="sistema">  
					    <f:facet name="header">  
					            Sistemas
					    </f:facet>  
					    <h:panelGrid columns="1" style="width:100%" cellpadding="5">  
					        <h:outputText value="Nome: #{sistema.nome}" />  
					          
					        <h:outputText value="Descrição: #{sistema.descricao}" />  
					          
					    </h:panelGrid>  
					    <f:facet name="footer">  
					    </f:facet>  
					</p:carousel> -->
					
					<!-- <p:ring id="basic" value="#{sistemaMB.sistemas}" var="sistema" style="width:100%">
						<p:column>
							<p:outputPanel style="text-align:center;" layout="block">
								#{sistema.nome}  
							</p:outputPanel>
						</p:column>
					</p:ring> -->
					
					<!-- <p:ring id="basic" value="#{sistemaMB.sistemas}" var="sistema">
						<p:outputPanel style="text-align:center;" layout="block">
							<p:column>  
					            #{sistema.nome}  
					            <p:commandButton update=":form:detail"
									icon="ui-icon-search" title="View" oncomplete="PF('dlg').show()">
									<f:setPropertyActionListener value="#{sistema}"
										target="#{sistemaMB.selectedSistema}" />
								</p:commandButton>
							</p:column> 
						</p:outputPanel>
					</p:ring>

					<p:dialog id="dialog" widgetVar="dlg" showEffect="fade"
						hideEffect="fade" modal="true" width="125">

						<p:outputPanel id="detail" style="text-align:center;"
							layout="block">

							<h:panelGrid columns="2" cellpadding="5"
								rendered="#{not empty sistemaMB.selectedSistema}">
								<f:facet name="header">
									<h:outputText value="Nome: " />
									<h:outputText id="nome"
										value="#{sistemaMB.selectedSistema.nome}" />
								</f:facet>

								<h:outputText value="Descrição: " />
								<h:outputText id="descricao"
									value="#{sistemaMB.selectedSistema.descricao}" />

							</h:panelGrid>
						</p:outputPanel>

					</p:dialog>-->
					
					<!-- <p:ring id="arrowRing" var="sistema" value="#{sistemaMB.sistemas}">
		                <p:commandLink id="sisLink" update=":form:sisDetails" oncomplete="sisDialog.show()">
		                    <h:outputText value="#{sistema.nome}"/>
		                    <f:setPropertyActionListener value="#{sistema}"
										target="#{sistemaMB.selectedSistema}" />
		                </p:commandLink>
		            </p:ring>
		            
		            <p:dialog header="Arrow Details" widgetVar="sisDialog" width="800" height="250"
		                      modal="true" showEffect="fade" hideEffect="explode">
		                <p:outputPanel id="sisDetails" style="text-align:center;" layout="block">
		                    <h:panelGrid  columns="2" cellpadding="5">
		                        <h:outputLabel for="id" value="ID: " />
		                        <h:outputText id="id" value="#{sistemaMB.selectedSistema.id}" />
		                        <h:outputLabel for="name" value="Name: " />
		                        <h:outputText id="name" value="#{sistemaMB.selectedSistema.nome}" />
		                        <h:outputLabel for="description" value="Description: " />
		                        <h:outputText id="description" value="#{sistemaMB.selectedSistema.descricao}" />
		                    </h:panelGrid>
		                </p:outputPanel>
		            </p:dialog> -->

				</h:form>

			</ui:define>
		</ui:composition>
	</p:layout>
</h:body>
</html>